<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>条件语句</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- TODO:如何实现判断语句 -->
            <p v-if="show">显示</p>
            <p v-else>否则显示</p>

            <template v-if="show">
                <h1>头部显示</h1>
                <p>默认显示</p>
            </template>

            <p v-show="show">样式控制显示</p>
            <button @click="show =! show">是否显示的切换</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            new Vue({
                el: '#app',
                data: {
                    show: true,
                },
            });
        </script>
    </body>
</html>
